<template>
	<el-dialog
		:visible.sync="visible"
		:title="!dataForm.id ? $t('add') : $t('update')"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form
			:model="dataForm"
			:rules="dataRule"
			ref="dataForm"
			@keyup.enter.native="dataFormSubmitHandle()"
			:label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
		>
			<el-form-item label="电影名称" prop="name">
				<el-input v-model="dataForm.name" placeholder="电影名称"></el-input>
			</el-form-item>
			<el-form-item label="主演" prop="starring">
				<el-input v-model="dataForm.starring" placeholder="主演"></el-input>
			</el-form-item>
			<el-form-item label="导演" prop="director">
				<el-input v-model="dataForm.director" placeholder="导演"></el-input>
			</el-form-item>
			<el-form-item label="简介" prop="synopsis">
				<el-input v-model="dataForm.synopsis" placeholder="简介"></el-input>
			</el-form-item>
			<el-form-item label="电影状态" prop="status">
				<el-input
					v-model="dataForm.status"
					placeholder="0未上映，1正在热映 2已下线"
				></el-input>
			</el-form-item>
			<el-form-item label="播放时长" prop="duration">
				<el-input v-model="dataForm.duration" placeholder="播放时长"></el-input>
			</el-form-item>
			<el-form-item label="电影类型" prop="type">
				<el-input v-model="dataForm.type" placeholder="电影类型"></el-input>
			</el-form-item>
			<el-form-item label="电影封面图" prop="posterUrl">
				<el-input
					v-model="dataForm.posterUrl"
					placeholder="电影封面图"
				></el-input>
			</el-form-item>
			<el-form-item label="发行时间" prop="publishDate">
				<el-input v-model="dataForm.publishDate" placeholder=""></el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{
				$t("confirm")
			}}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
export default {
	data() {
		return {
			visible: false,
			dataForm: {
				id: "",
				name: "",
				starring: "",
				director: "",
				synopsis: "",
				status: "",
				duration: "",
				type: "",
				posterUrl: "",
				createTime: "",
				publishDate: "",
			},
		};
	},
	computed: {
		dataRule() {
			return {
				name: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				starring: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				director: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				synopsis: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				status: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				duration: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				type: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				posterUrl: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				createTime: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				publishDate: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
			};
		},
	},
	methods: {
		init() {
			this.visible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].resetFields();
				this.dataForm.id && this.getInfo();
			});
		},
		// 获取信息
		 getInfo() {
			this.$http.get(`/movie-mgt/${this.dataForm.id}`).then(({ data: res }) => {
				if (res.code !== 0) {
					return this.$message.error(res.msg);
				}
				this.dataForm = {
					...this.dataForm,
					...res.data,
				};
			});
		},
		// 表单提交
		dataFormSubmitHandle: debounce(
			function() {
				this.$refs["dataForm"].validate((valid) => {
					// if (!valid) {
					// 	return false;
					// }
					const type = this.dataForm.id ? "update" : "add";
					const uri = {
						add: "/movie-mgt",
						update: "/movie-mgt/action/update",
					}[type];
					delete this.dataForm.createTime;
					this.$http
						.post(uri, this.dataForm)
						.then(({ data: res }) => {
							if (res.code !== 0) {
								return this.$message.error(res.msg);
							}
							this.$message({
								message: this.$t("prompt.success"),
								type: "success",
								duration: 500,
								onClose: () => {
									this.visible = false;
									this.$emit("refreshDataList");
								},
							});
						})
						.catch(() => {});
				});
			},
			1000,
			{ leading: true, trailing: false }
		),
	},
};
</script>
